import React, { useRef, useState } from 'react';
import { Row, Col,  Button, Space, Descriptions, Tag } from 'antd';
import ProForm, {
  DrawerForm,
  ProFormTextArea,
  ProFormInstance,
} from '@ant-design/pro-form';
import * as api from '@/services/vpnServer';
// import Form from './BatchForm';
import * as utils from '@/utils/utils';
import Paragraph from 'antd/es/typography/Paragraph';

type VpnServerFormProps = {
  visible: boolean;
  onCancel: () => void;
};

const VpnServerForm: React.FC<VpnServerFormProps> = (props) => {
  const { visible, onCancel } = props;

  if (!visible) {
    return null;
  }
  const formRef = useRef<ProFormInstance>();

  const [dataSource, setDataSource] = useState<API.VpnServerBlockedIp[]|undefined>(undefined);
  const [dataBlocked, setDataBlocked] = useState<string>('');
  const [dataUnblocked, setDataUnblocked] = useState<string>('');
  

  const handleCheckIpList = async () => {
    let ips = formRef.current?.getFieldValue('ips');
    let blocked = [];
    let unblocked = [];
    const result = await api.checkblockedIpList({ips:ips});
    if (result && result.success) {
      setDataSource(result.data);
      for(let i = 0; i < result.data.length; i++){
        let ip = result.data[i];
        if(ip.blocked == true){
          blocked.push(ip.ip);
        }
        else{
          unblocked.push(ip.ip);
        }
      }
    }
    setDataBlocked(blocked.join('\r\n'));
    setDataUnblocked(unblocked.join('\r\n'));

    // return Promise.resolve(result.data);
      
  };
  

  return (
    <DrawerForm<API.VpnServerBlockedIp>
      open={visible}
      // initialValues={dataSource}
      title='检查服务器IP'
      formRef={formRef}
      autoFocusFirstInput
      width={1000}
      drawerProps={{
        // forceRender: true,
        // destroyOnClose: true,
        // closable: false,
        onClose: onCancel,
        maskClosable: false,
      }}
      submitter={{
        render: (props, defaultDoms) => {
          return [defaultDoms[0]];
        },
      }}
    >
      <Row gutter={24}>
        <Col span={24}>
          <ProFormTextArea name="ips" label="IP列表　[ 一行一个IP ]" fieldProps={{rows:20}} />
        </Col>
        <Col span={24}>
          <ProForm.Item
            name="servers"
            label=''
          >
            
            <Descriptions
              size="small"
              column={8}
              title={
                <>
                  检查结果　
                  <Button
                    type="primary"
                    ghost
                    onClick={() => {
                      handleCheckIpList();
                    }}
                  >
                    开始检查
                  </Button>　
                  <Space><Paragraph copyable={{ text: dataBlocked && dataBlocked.length > 0 ? dataBlocked : ' '}}>
                    复制被墙IP
                  </Paragraph>　</Space>
                  <Space><Paragraph copyable={{ text: dataUnblocked && dataUnblocked.length > 0 ? dataUnblocked : ' ' }}>
                    复制正常IP
                  </Paragraph></Space>
                </>
              }
              style={{ marginBottom: 30 }}
            >
              {utils.listHtoV(dataSource, 8)?.map((val) => {
                return (
                  <Descriptions.Item label="">
                    <Tag color={val.blocked == true ? 'error' : 'success'}>{val.ip}</Tag>
                  </Descriptions.Item>
                );
              })}
            </Descriptions>
                        
          </ProForm.Item>
        </Col>
      </Row>

    </DrawerForm>
  );
};

export default VpnServerForm;
